<template>
	<view>
		<u-sticky>
			<u-tabs :active-color="color" :list="list" bar-width="80" fontSize="40" :is-scroll="false"
				:current="current" @change="change">
			</u-tabs>
		</u-sticky>
		<view style="height: 100rpx;">
			<view v-for="(item, index) in vacationQueryDO.pageBean.data" :key="index">
				<u-card title="病假" title-color="#8d8d8d" :sub-title="'申请时间：'+item.applyTime"
					v-if="item.vacationType == 0">
					<view slot="body">
						<view>
							请假理由：{{item.vacationDescribe}}
						</view>
						<view v-if="item.state != 0">
							批示：{{item.instruct}}
						</view>
					</view>
				</u-card>
				<u-card title="事假" title-color="#55aaff" :sub-title="'申请时间：'+item.applyTime"
					v-if="item.vacationType == 1">
					<view slot="body">
						<view>
							请假理由：{{item.vacationDescribe}}
						</view>
						<view v-if="item.state != 0">
							批示：{{item.instruct}}
						</view>
					</view>
				</u-card>
				<u-card title="放假" title-color="#4ce570" :sub-title="'申请时间：'+item.applyTime"
					v-if="item.vacationType == 2">
					<view slot="body">
						<view>
							请假理由：{{item.vacationDescribe}}
						</view>
						<view v-if="item.state != 0">
							批示：{{item.instruct}}
						</view>
					</view>
				</u-card>
				<u-card title="其他" title-color="#ffaa00" :sub-title="'申请时间：'+item.applyTime"
					v-if="item.vacationType == 3">
					<view slot="body">
						<view>
							请假理由：{{item.vacationDescribe}}
						</view>
						<view v-if="item.state != 0">
							批示：{{item.instruct}}
						</view>
					</view>
				</u-card>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list: [{
					name: '等待审核'
				}, {
					name: '未同意'
				}, {
					name: '已同意',
				}],
				color: "",
				colors: [
					"#ffaa00",
					"#ff007f",
					"#00aa7f",
				],
				current: 0,
				vacationQueryDO: {
					studentId: "6",
					teacherId: "",
					vacationType: "",
					studentNumber: "",
					studentName: "",
					searchStartTime: "",
					searchEndTime: "",
					state: "0",
					pageBean: {
						currPage: "1",
						pageSize: "10",
						totalPages: "",
						totalNum: "",
						data: [],
					},
				},
			}
		},
		created() {
			this.color = this.colors[0];
			this.getList();
		},
		methods: {
			change(index) {
				this.current = index;
				this.color = this.colors[index];
				this.vacationQueryDO.state = index;
				this.getList();
			},
			getList() {
				this.$axios
					.post("/api/attendance/vacation/list", this.vacationQueryDO)
					.then((r) => {
						this.vacationQueryDO.pageBean = r.data.data;
						console.log( r.data.data);
					});
			},
		}
	}
</script>
